<template>
    <div class="searchDetails">
        <van-nav-bar
                title="搜索成功"
                left-text="返回"
                right-text=""
                left-arrow
                @click-left="onClickLeft"/>
        <van-row>
            <van-col span="24"><van-search
                    v-model="value"
                    shape="round"
                    background="#FFFFFF"
                    :placeholder="value?value:('收缩爆款商品....')"
            /></van-col>
        </van-row>
        <div>
            <van-tabs v-model="active">
                <van-tab title="综合">
                    <div class="content">
                        <div v-for="item in searchGoods" @click="xiangQing(item.goodsId)">
                            <div>
                                <van-image
                                        width="150"
                                        height="145"
                                        :src="'/tu/'+item.goodsImg"
                                />
                            </div>
                            <div>
                                <div>{{item.goodsName}}</div>
                                <div><div>￥<span>{{item.goodsPrice}}</span></div><div>已拼 <span>{{item.goodsVirtualSale+item.goodsRealSale}}</span>件</div></div>
                            </div>
                        </div>
                    </div>
                    <div style="margin-left: 10px;margin-top: 10px;margin-bottom: 10px">精品推荐</div>
                    <div class="content">
                        <div v-for="item in jingPing"  @click="xiangQing(item.goodsId)" >
                            <div>
                                <van-image
                                        width="150"
                                        height="145"
                                        :src="'/tu/'+item.goodsImg"
                                />
                            </div>
                            <div>
                                <div>{{item.goodsName}}</div>
                                <div><div>￥<span>{{item.goodsPrice}}</span></div><div>已拼 <span>{{item.goodsVirtualSale+item.goodsRealSale}}</span>件</div></div>
                            </div>
                        </div>
                    </div>
                </van-tab>
                <van-tab title="销量">
                    <div class="content">
                        <div v-for="item in xiaoLiang" style="position: relative"  @click="xiangQing(item.goodsId)" >
                            <van-icon name="hot" color="red"  style="position: absolute;top:-10px; left:-10px;font-size: 50px;z-index: 100;"/>
                            <div>
                                <van-image
                                        width="150"
                                        height="145"
                                        :src="'/tu/'+item.goodsImg"
                                />
                            </div>
                            <div>
                                <div>{{item.goodsName}}</div>
                                <div><div>￥<span>{{item.goodsPrice}}</span></div><div>已拼 <span>{{item.goodsRealSale}}</span>件</div></div>
                            </div>
                        </div>
                    </div>
                </van-tab>
                <van-tab title="价格">
                    <div class="content">
                        <div v-for="item in jiaGe"  @click="xiangQing(item.goodsId)" >
                            <div>
                                <van-image
                                        width="150"
                                        height="145"
                                        :src="'/tu/'+item.goodsImg"
                                />
                            </div>
                            <div>
                                <div>{{item.goodsName}}</div>
                                <div><div>￥<span>{{item.goodsPrice}}</span></div><div>已拼 <span>{{item.goodsVirtualSale+item.goodsRealSale}}</span>件</div></div>
                            </div>
                        </div>
                    </div>
                </van-tab>
                <van-tab title="新品">
                    <div class="content">
                        <div v-for="item in xinPing" style="position: relative"  @click="xiangQing(item.goodsId)" >
                            <van-icon name="new-arrival" color="blue"  style="position: absolute;top:-10px; left:-10px;font-size: 50px;z-index: 100;background-color: white"/>
                            <div>
                                <van-image
                                        width="150"
                                        height="145"
                                        :src="'/tu/'+item.goodsImg"
                                />
                            </div>
                            <div>
                                <div>{{item.goodsName}}</div>
                                <div><div>￥<span>{{item.goodsPrice}}</span></div><div>已拼 <span>{{item.goodsVirtualSale+item.goodsRealSale}}</span>件</div></div>
                            </div>
                        </div>
                    </div>
                </van-tab>
                <van-tab title="筛选" class="van-dropdown-menu van-dropdown-item">
                    <van-dropdown-menu z-index="2">
                        <van-dropdown-item title="请选择价格区间..." disabled />
                        <van-dropdown-item v-model="value2" :options="option2" lazy-render @change="price"/>
                    </van-dropdown-menu>
                        <van-cell center title="包邮" :z-index="10" >
                            <template #right-icon>
                                <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
                            </template>
                        </van-cell>
                        <div style="padding: 5px 16px;" :z-index="10">
                            <van-button type="danger" block round @click="onConfirm">
                                确认
                            </van-button>
                        </div>
                </van-tab>
            </van-tabs>
        </div>
        <van-overlay :show="loading==1" @click="show = false" z-index="1000" >
            <van-loading size="24px" vertical v-show="loading==1" color="white" style="margin-top:50%">加载中...</van-loading>
        </van-overlay>
    </div>
</template>

<script>
    export default {
        name: "searchDetails",
        data(){
            return {
                active: 0,
                value:'',
                searchGoods:[],
                fenLeiValue: 0,
                switch1: false,
                switch2: false,
                jingPing:[],
                xiaoLiang:[],
                jiaGe:[],
                xinPing:[],
                quJian:[],
                priceContent:[0,100],
                value2: '0-100',
                free:[],
                loading:0,
                option2: [
                    { text: '0-100', value: '0-100' },
                    { text: '101-300', value: '101-300' },
                    { text: '301-500', value: '301-500' },
                    { text: '501-700', value: '501-700' },
                    { text: '701-900', value: '701-900' },
                    { text: '901-2000', value: '901-2000' },
                ],
            };
        },
        methods:{
            xiangQing(goodsId){
                this.$store.dispatch('setGoodsid',goodsId)
                this.$router.push({name:'shopList'})
            },
            onConfirm() {
                this.loading=1
                if (this.switch1){
                    this.$axios.post('/api/goods/list',{pageSize:1000,goodsStatus:1,endPrice:Number(this.priceContent[1]),startPrice:Number(this.priceContent[0])}).then(res=>{
                        if (res.data.data.length>0){
                        console.log(res.data.data)
                        res.data.data.forEach(item=>{
                            if (item.goodsFreeShipping){
                                this.free.push(item)
                            }
                        })
                        console.log(this.free)
                            this.jingPing=res.data.data
                            this.xiaoLiang=res.data.data
                            this.jiaGe=res.data.data
                            this.xinPing=res.data.data
                            this.quJian=res.data.data
                        }
                        this.active=0
                        this.loading=0
                    })
                }else {
                    this.$axios.post('/api/goods/list', {
                        pageSize: 1000,
                        goodsStatus: 1,
                        endPrice: Number(this.priceContent[1]),
                        startPrice: Number(this.priceContent[0])
                    }).then(res => {
                        console.log(res.data)
                        if (res.data.data.length> 0) {
                            this.jingPing = res.data.data
                            this.xiaoLiang = res.data.data
                            this.jiaGe = res.data.data
                            this.xinPing = res.data.data
                            this.quJian = res.data.data
                        }
                        this.active=0
                        this.loading=0
                    })
                }
            },
            onClickLeft(){
                this.$router.push({name:'index'})
            },
            price(){
                console.log(this.value2)
                this.priceContent=this.value2.split('-')
                console.log(Number(this.value2[0]))
                console.log(Number(this.value2[1]))
            }
        },
        created() {
            this.value=sessionStorage.getItem('value')
            this.searchGoods=JSON.parse(sessionStorage.getItem('goods'))
            //综合排序
            this.$axios.post('/api/goods/list',{pageSize:1000,goodsStatus:1}).then(res=>{
                this.jingPing=res.data.data
                console.log(res.data)
            })
            //销量排序
            this.$axios.post('/api/goods/list',{pageSize:1000,goodsSales:0,goodsStatus:1}).then(res=>{
                this.xiaoLiang=res.data.data
                console.log(res.data)
            })
            //价格排序
            this.$axios.post('/api/goods/list',{pageSize:1000,goodsPrice:0,goodsStatus:1}).then(res=>{
                this.jiaGe=res.data.data
                console.log(res.data)
            })
            //新品排序
            this.$axios.post('/api/goods/list',{pageSize:1000,newGoods: 0,goodsStatus:1}).then(res=>{
                this.xinPing=res.data.data
                console.log(res.data)
            })
            // //筛选 价格区间
            // this.$axios.post('/api/goods/list',{pageSize:1000,endPrice:0,startPrice:0}).then(res=>{
            //     this.xinPing=res.data.data
            //     console.log(res.data)
            // })
            this.active=sessionStorage.getItem('active')
        }
    }
</script>

<style scoped>

    .badge-icon {
        display: block;
        font-size: 10px;
        line-height: 16px;
    }
    .message{
    line-height: 54px;
}
.content{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-left: 4%;
    padding-right: 4%;
}
.content>div{
    width: 42%;
    padding: 10px;
    border-radius: 3px;
    box-shadow: 0 0 5px 5px #f2f2f2;
    margin-top: 7px;
    margin-bottom: 7px;
}
.van-image{
    /*margin-left: 10px;*/
}
.van-tab__pane{
    padding-top: 10px;
}
    .content>img{
        width: 50%;
        height: 50%;
        margin-left: 4%;
    }
    .content>div>div:nth-child(2)>div:nth-child(2){
        display: flex;
        justify-content: space-between;
    }
.content>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(1){
    color: #FF6633;
}
.content>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(2){
    color: #CCCCCC;
    font-size: 13px;
}
.content>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>span{
    color: #FF6633;
}
</style>